<!doctype html>
<html lang="en">

	<head>
		<meta charset="UTF-8">
		<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
		<meta http-equiv="X-UA-Compatible" content="ie=edge">
		<title>幻灯片设置</title>
		<link rel="stylesheet" href="layui/css/layui.css">
		<link rel="stylesheet" type="text/css" href="css/slide.css" />
		<style>
			#uniocn {
				box-sizing: border-box;
				padding: 15px 100px;
			}
		</style>
	</head>

	<body>
		<div id="uniocn" class="layui-layout layui-layout-admin">
			<div class="finance-title" style="background: #fff;">
				<button id="addNew" class="layui-btn">添加幻灯片</button>
			</div>
			<div class="manageb">
				<form class="layui-form">
					<div class="layui-input-inline" style="width: 100px;font-size: 14px;">
						<select name="interest" lay-filter="aihao">
							<option value="" selected=""></option>
							<option value="0">首页</option>
							<option value="1">团购</option>
						</select>
					</div>

					<div class="layui-input-inline">
						<input type="text" name="keyword" placeholder="请输入标题" class="layui-input" style="font-size: 14px;">
					</div>
					<div class="layui-input-inline">
						<button class="layui-btn layui-btn-normal" lay-submit lay-filter="formDemo">搜索</button>
					</div>
				</form>
			</div>

			<div class="table">
				<table class="layui-hide" id="demo" lay-filter="demo"></table>
				<script type="text/html" id="barDemo">
					<a class="layui-btn layui-btn-sm" lay-event="edit">编辑</a>
					<a class="layui-btn layui-btn-danger layui-btn-sm" lay-event="delect">删除</a>
				</script>
			</div>

		</div>

		<!--添加幻灯片-->
		<div class="alear_a">
			<form class="layui-form" action="">
				<div class="layui-form-item">
					<label class="layui-form-label">显示位置</label>
					<div class="layui-input-block">
						<select>
							<option value=""></option>
							<option value="0">首页</option>
							<option value="1">优惠券</option>
						</select>
					</div>
				</div>
				<div class="layui-form-item">
					<label class="layui-form-label">排序</label>
					<div class="layui-input-block">
						<input type="tel" placeholder="请输入排序" class="layui-input">
					</div>
				</div>
				<div class="layui-form-item">
					<label class="layui-form-label">幻灯片标题</label>
					<div class="layui-input-block">
						<input type="text" placeholder="请输入幻灯片标题" class="layui-input">
					</div>
				</div>
				<div class="layui-form-item">
					<label class="layui-form-label">幻灯片链接</label>
					<div class="layui-input-block">
						<input type="text" placeholder="请输入幻灯片链接" class="layui-input">
					</div>
				</div>
				<div class="layui-form-item">
					<label class="layui-form-label">幻灯片图片</label>
					<div class="layui-input-block">
						<div class="layui-upload">
							<button type="button" class="layui-btn" id="test1">上传图片</button>
							<div class="layui-upload-list">
								<img class="layui-upload-img" style="width: 120px;" id="demo1">
								<p id="demoText"></p>
							</div>
						</div>
					</div>
				</div>
				<div class="layui-form-item">
					<label class="layui-form-label">是否显示</label>
					<div class="layui-input-block">
						<input type="radio" name="show" value="是" title="是">
						<input type="radio" name="show" value="否" title="否" checked>
					</div>
				</div>
			</form>
		</div>
		<!--状态-->
		<script type="text/html" id="checkboxTpl">
			<input type="checkbox" name="lock" value="{{d.id}}" title="开启" lay-filter="lockDemo" {{ d.id==1 ? 'checked' : '' }}>
		</script>
	</body>

	<script src="layui/layui.js"></script>
	<script src="js/jquery-3.2.1.min.js"></script>
	<script>

		layui.use(['element', 'layer', 'table', 'form', 'upload'], function() {
			var element = layui.element,
				layer = layui.layer,
				table = layui.table,
				form = layui.form,
				upload = layui.upload;

			$('#addNew').click(function() {
				layer.open({
					title: '添加幻灯片',
					type: 1,
					area: '600px',
					content: $('.alear_a'),
					btn: ['提交', '取消'],
					btnAlign: 'c',
					yes: function(index, layero) {
						layer.msg('提交成功', {
							time: 2000,
						});
						layer.close(index);
					}
				});
			})

			//普通图片上传
			var uploadInst = upload.render({
				elem: '#test1',
				url: '',
				before: function(obj) {
					//预读本地文件示例，不支持ie8
					obj.preview(function(index, file, result) {
						$('#demo1').attr('src', result); //图片链接（base64）
					});
				},

				done: function(res) {
					//如果上传失败
					if(res.code > 0) {
						return layer.msg('上传失败');
					}
					//上传成功
				},

				error: function() {
					//演示失败状态，并实现重传
					var demoText = $('#demoText');
					demoText.html('<span style="color: #FF5722;">上传失败</span> <a class="layui-btn layui-btn-xs demo-reload">重试</a>');
					demoText.find('.demo-reload').on('click', function() {
						uploadInst.upload();
					});
				}
			})

			//搜索
			form.on('submit(formDemo)', function(data) {
				console.log(JSON.stringify(data.field));
				return false;
			});

			//
			table.render({
				elem: '#demo',
				cols: [
					[ //标题栏
						{
							field: 'picture',
							title: '图片',
							align: 'center',
						},
						{
							field: 'order',
							title: '显示顺序',
							align: 'center',
						}, {
							field: 'title',
							title: '标题',
							align: 'center',
						}, {
							field: 'link',
							title: '链接',
							align: 'center',
						}, {
							field: 'lock',
							title: '状态',
							align: 'center',
							templet: '#checkboxTpl',
							unresize: true
						}, {
							field: 'position',
							title: '位置',
							align: 'center',
						}, {
							fixed: 'right',
							title: '操作',
							align: 'center',
							width: 300,
							toolbar: '#barDemo'
						}
					]
				],
				data: [{
					"picture": "<img src='images/bg.png' style='width: 100px;height: 50px;'/>",
					"order": "0",
					"title": "首页banner图",
					"link": "index.html",
					"position": "首页"
				}, {
					"picture": "<img src='images/bg.png' style='width: 100px;height: 50px;'/>",
					"order": "1",
					"title": "首页banner图",
					"link": "index.html",
					"position": "首页"
				}],
				page: true, //是否显示分页
				limit: 10 //每页默认显示的数量
			});

			//监听状态操作
			form.on('checkbox(lockDemo)', function(obj) {
				console.log(this.value + ' ' + this.name + '：' + obj.elem.checked, obj.othis);
			})

			//监听工具条
			table.on('tool(demo)', function(obj) {
				var data = obj.data;
				if(obj.event === 'edit') { //编辑
					layer.open({
						title: '编辑幻灯片',
						type: 1,
						area: '600px',
						content: $('.alear_a'),
						btn: ['提交', '取消'],
						btnAlign: 'c',
						yes: function(index, layero) {
							layer.msg('提交成功', {
								time: 2000,
							});
							layer.close(index);
						}
					});
				} else if(obj.event === 'delect') { //删除
					layer.confirm('确认删除吗？', function(index) {
						obj.del();
						layer.close(index);
					});
				}
			})

		})
	</script>

</html>